<script setup>
import { ref, reactive, toRefs } from "vue";

const name = ref("张三");
const age = ref(18);
const job = reactive({
  title: "总经理",
  salary: "30k",
});
const hobbies = reactive(["抽烟", "喝酒", "烫头"]);

function changeInfo() {
  name.value = "李四";
  age.value = 20;
  job.title = "CEO";
  job.salary = "50k";

  hobbies[0] = "画画";
}

function addHobby() {
  hobbies.unshift("马拉松");
}
</script>

<template>
  <div>
    <h1>个人信息</h1>
    <div>姓名：{{ name }}</div>
    <div>年龄：{{ age }}</div>
    <div>工作头衔：{{ job.title }}</div>
    <div>工资：{{ job.salary }}</div>
    <ul>
      <li v-for="hobby in hobbies" :key="hobby">{{ hobby }}</li>
    </ul>
    <div>
      <button @click="changeInfo">改变信息</button>
      <button @click="addHobby">添加一个爱好</button>
    </div>
  </div>
</template>

<style scoped></style>
